<!-- 表行 》 图片 》 展示 -->

<template>
  <span v-if="urlList.length" :class="`CoreWeb-Row${this.$options.name}`">
    <BtnText :title="btnText" @click="toPreview" />

    <el-image v-show="false" ref="image" :src="urlList[0]" :preview-src-list="urlList" />
  </span>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import TitleBtn from '../../RowTitle/TitleBtn'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ImageShow',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: {
    ...CORE.WEB.RowCommon,
    ...CORE.WEB.RowImage,
    row: { type: Object, required: true }, // 行数据
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 绑定值
     */
    value: TitleBtn.computed.value,

    /**
     * 图片路径列表
     */
    urlList() {
      const { value, join, pathKey } = this
      if (join) {
        if (!value || !CORE.isString(value)) return []
        return value.split(',').map((image) => CORE.image(image))
      } else if (pathKey) {
        if (!value || !CORE.isArray(value) || value.some((item) => !CORE.isJSON(item))) return []
        return value.map((item) => CORE.image(item[pathKey]))
      } else {
        if (!value || !CORE.isArray(value)) return []
        return value.map((image) => CORE.image(image))
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取绑定值
     */
    getValue: TitleBtn.methods.getValue,

    /**
     * 点击预览
     */
    toPreview() {
      this.$refs.image.showViewer = true
    },
  },
}
</script>
